@primary-color: @primary-color;

// 品质工程 公共样式
.custom-quality-engineering-container {
  display: flex;
  flex-direction: column;

  .screen-conditions-container {
    background-color: @base-bg-color;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;

    .ant-input {
      width: 183px !important;
      margin-right: 16px;
    }

    .ant-select {
      margin-right: 16px;

      .ant-select-selection {
        &.ant-select-selection--single {
          width: 183px;
        }

        &.ant-select-selection--multiple {
          min-width: 183px;
        }
      }
    }
    .ant-calendar-picker {
      .ant-input {
        width: 260px !important;
      }
    }

    .group-button {
      display: flex;
    }
  }

  .table-container {
    flex: 1;
    background-color: @base-bg-color;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;

    .header {
      box-sizing: border-box;
      height: 42px;
      //   padding-bottom: 10px;
      //   display: flex;
      //   justify-content: space-between;
      //   align-items: center;
      //   &::before {
      //     content: attr(header);
      //     height: 18px;
      //     border-left: 3px solid @primary-color;
      //     padding-left: 10px;
      //     font-size: 18px;
      //     font-family: Microsoft YaHei;
      //     font-weight: 400;
      //     color: #525a5d;
      //     line-height: 18px;
      //   }
    }

    .main {
      flex: 1;
      height: 100%;
    }

    .pager-container {
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}

//vxe 表格 操作按钮样式
.text-button-group {
  .ant-btn-link {
    color: @primary-color;
    margin: 0 16px;
    position: relative;
    background: none !important;
    padding: 0;

    &.danger {
      color: #ff4d4f;
    }

    &[disabled="disabled"] {
      color: rgba(0, 0, 0, 0.25);
    }

    &::after {
      content: "";
      position: absolute;
      height: 16px;
      width: 1px;
      background: @border-color;
      right: -16px;
      top: 50%;
      transform: translateY(-50%);
    }

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;

      &::after {
        display: none;
      }
    }
  }

  .anticon {
    font-size: 18px;
    color: #1677ff;
    margin-right: 16px;
    cursor: pointer;

    &:last-of-type {
      margin-right: 0;
    }

    &.anticon-edit {
      color: #239b53;
    }

    &.anticon-delete {
      color: #e43d3d;
    }
    &.submit {
      color: #6e6bf2;
    }
    &.record {
      color: #c652f0;
    }

    &.approve {
      color: #00c1b6;
    }

    &.anticon-rollback {
      color: #8c8c8c;
    }

    &.contrast {
      color: #f07f17;
    }

    &.drawing {
      color: #239b53;
    }
    &.approve {
      color: #00c1b6;
    }
  }
}

.vxe-table {
  .vxe-table--header-wrapper {
    background: #fafafa !important;

    .vxe-body--x-space {
      border-top: 1px solid @border-color !important;
    }

    .vxe-table--header {
      .vxe-header--row {
        .vxe-cell--title {
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          font-weight: normal;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
      }
    }

    .vxe-table--header-border-line {
      border-bottom: 1px solid @border-color !important;
    }
  }

  .vxe-table--body-wrapper {
    .vxe-body--column {
      border: 0;
      background-image: linear-gradient(
        @border-color,
        @border-color
      ) !important;
    }
  }

  .vxe-table--border-line {
    border-bottom: 1px solid @border-color !important;
  }
}

.ant-input[disabled] {
  pointer-events: all !important;
}

.ant-radio-disabled .ant-radio-inner::after {
  background-color: @primary-color !important;
}

.ant-radio-disabled + span {
  color: #000000 !important;
}

.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: @primary-color !important;
}

.ant-cascader-picker-disabled {
  color: rgba(0, 0, 0, 0.56) !important;
}

//折叠面板公共样式
.custom-collapse-container {
  .ant-collapse {
    border-radius: 0;
    border: none;
    background: @base-bg-color;

    .ant-collapse-item {
      border: 0;
      border-bottom: 2px solid @border-color;

      //头部
      .ant-collapse-header {
        padding: 0 !important;
        margin-left: auto;
        margin-right: 30px;
        border-radius: 0;
        display: flex;
        align-items: center;

        //左侧 标题
        .customize-text {
          flex: 1;
          padding: 10px 0 18px 20px !important;
          display: flex;
          align-items: center;
          justify-content: space-between;

          &::before {
            content: attr(header);
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #525a5d;
          }
        }

        //右侧 收起/展开 按钮
        .customize-extra {
          user-select: none;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #3759a0;

          .icon {
            transform: scale(0.75);
            margin-left: 4px;
            transition: 0.3s;

            &.active {
              transform: scale(0.75) rotate(180deg);
            }
          }
        }
      }

      //主体
      .ant-collapse-content {
        border: none;

        .ant-collapse-content-box {
          padding: 0;
        }
      }
    }
  }
}

.screen-conditions-container {
  margin-bottom: 10px;
}

//资料库公共样式
.custom-knowledgeBase-container {
  display: flex;
  flex-direction: column;
  position: relative;
  .result-body-warp {
    flex: 1;
    display: flex;
    overflow: hidden;
    .drawing-container {
      height: 100%;
      width: 300px;
      background: #fff;
      margin-right: 10px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .header {
        flex-shrink: 0;
        height: 56px;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        align-items: center;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        color: #333333;
        font-size: 16px;
        .add-file-button {
          color: #8c8c8c;
          font-size: 18px;
        }
      }
      .condition {
        flex-shrink: 0;
        padding: 16px 0 10px 0;
        display: flex;
        justify-content: center;
        position: relative;

        input {
          width: 268px;
          padding-right: 36px;
        }
        .search-btn {
          position: absolute;
          width: 30px;
          height: 28px;
          background: #fff;
          top: 18px;
          right: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #8c8c8c;
          font-size: 20px;
        }
      }
      .tree-container {
        flex: 1;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        padding: 10px 10px 10px 10px;
        box-sizing: border-box;
        .ant-tree {
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 25px);
              padding: 0;
              .ant-tree-iconEle {
                color: #f3ab1f;
                font-size: 16px;
              }
              .ant-tree-title {
                overflow: hidden;
                display: inline-block;
                width: calc(100% - 26px);
                .custom-tree-title-warp {
                  display: flex;
                  width: 100%;
                  .title {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .operate {
                    display: none;
                    flex-shrink: 0;
                    margin-left: 8px;
                    color: #8c8c8c;
                    // width: 59px;
                    .submit-btn {
                      margin-right: 8px;
                    }
                    .add-file-button {
                      font-size: 15px;
                    }
                    .edit-btn {
                      margin: 0 8px;
                    }
                  }
                }
              }
              &:hover {
                .ant-tree-title {
                  .custom-tree-title-warp {
                    .operate {
                      display: block;
                    }
                  }
                }
              }
            }
          }
        }
        .ant-empty {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .right-container {
      height: 100%;
      flex: 1;
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 6px 6px 6px 6px;
      .header {
        height: 60px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        button {
          &[disabled] {
            background-color: #f5f5f5 !important;
          }
        }
        .operate-condition-warp {
          button {
            &:not(:last-child) {
              margin-right: 10px;
            }
          }
        }
        .search-condition-warp {
          display: flex;
          .condition-warp {
            .ant-input {
              margin-right: 10px;
            }
            .ant-select {
              margin-right: 10px;
            }
            .ant-calendar-picker {
              margin-right: 10px;
            }
          }
          .button-warp {
            button {
              &:not(:last-child) {
                margin-right: 10px;
              }
            }
          }
        }
      }
      .table-container {
        flex: 1;
        overflow: hidden;
        padding: 0 16px;
        .preview-btn {
          color: #1677ff;
          margin-right: 12px;
          font-size: 15px;
        }
        .download-btn {
          color: #239b53;
          font-size: 16px;
        }
        .edit-btn {
          color: #239b53;
          margin-right: 12px;
          font-size: 15px;
        }
        .file-btn {
          cursor: pointer;
          color: #f07f17;
          margin-right: 12px;
          font-size: 15px;
        }
        .record-btn {
          cursor: pointer;
          color: #6e6bf2;
          margin-right: 12px;
          font-size: 15px;
        }
        .submit-btn {
          color: #00c1b6;
          margin-right: 12px;
          font-size: 15px;
          cursor: pointer;
        }
        .delete-btn {
          color: #e43d3d;
          font-size: 15px;
        }

        .correlation-model {
          color: #1677ff;
          font-size: 14px;
          .anticon {
            color: #239b53;
            margin-right: 6px;
          }
          &.no {
            .anticon {
              color: #ff2d2d;
            }
          }
          &.no {
            .anticon {
              color: #ff2d2d;
            }
          }
        }

        .status {
          padding-left: 16px;
          position: relative;
          &::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
          }
        }
        .default {
          &::before {
            background: #8c8c8c;
          }
        }
        .warning {
          &::before {
            background: #f07f17;
          }
        }
        .success {
          &::before {
            background: #4bc964;
          }
        }
        .reject {
          &::before {
            background: #ff3f4a;
          }
        }

        .progress {
          &::before {
            background: #a07df1;
          }
        }
      }
      .pager-container {
        flex-shrink: 0;
        padding: 10px;
        box-sizing: border-box;
      }
    }
  }
}

//列表页面公共样式
.custom-tablePage-container {
  display: flex;
  flex-direction: column;
  .table-body-container {
    border-radius: 6px 6px 6px 6px;
    flex: 1;
    background-color: @base-bg-color;
    flex-shrink: 0;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .table-operate {
      display: flex;
    }
    .table-main {
      flex: 1;
      .files-icon {
        .disabled {
          color: #d4d7d8 !important;
        }
        .anticon {
          cursor: pointer;
          font-size: 18px;
          color: #1677ff;
          margin-right: 16px;
          &:last-of-type {
            margin-right: 0;
          }
        }
        .anticon-download,
        .anticon-cloud-upload {
          color: #239b53;
        }
      }
    }
    .table-pager {
      flex-shrink: 0;
      padding: 10px 16px;
      box-sizing: border-box;
    }
  }
}

//左右布局公共样式
.custom-aboutPage-container {
  display: flex;
  flex-direction: column;
  position: relative;
  .about-body-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    .about-left-container {
      height: 100%;
      width: 300px;
      margin-right: 10px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .sub-header {
        flex-shrink: 0;
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        color: #333333;
        font-size: 16px;
        margin-bottom: 2px;
        background-color: @base-bg-color;
        .add-container {
          cursor: pointer;
          display: flex;
          align-items: center;
          color: #666666;
          font-size: 14px;
          .add-file-button {
            color: #8c8c8c;
            font-size: 16px;
            margin-right: 8px;
          }
        }
      }
      .search-condition {
        background-color: @base-bg-color;
        flex-shrink: 0;
        padding: 10px;
        box-sizing: border-box;
      }
      .tree-container {
        background-color: @base-bg-color;
        flex: 1;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        .ant-tree {
          .ant-tree-node-content-wrapper {
            &:hover {
              .operate {
                .anticon {
                  display: inline-block !important;
                }
              }
            }
          }
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 25px);
              padding: 0;
              .ant-tree-iconEle {
                color: #ffca28;
                font-size: 16px;
              }
              .ant-tree-title {
                overflow: hidden;
                display: inline-block;
                width: calc(100% - 26px);
                .custom-tree-title-warp {
                  display: flex;
                  width: 100%;
                  .title {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .operate {
                    flex-shrink: 0;
                    margin-left: 8px;
                    color: #8c8c8c;
                    .add-file-button {
                      font-size: 15px;
                    }
                    .anticon {
                      display: none;
                      margin-right: 8px;
                      &:last-of-type {
                        margin-right: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .ant-empty {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .about-right-container {
      height: 100%;
      flex: 1;
      background-color: @base-bg-color;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 6px 6px 6px 6px;
      .sub-header {
        height: 56px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 0 16px;
        button {
          margin-right: 12px;
          &[disabled] {
            background-color: #f5f5f5 !important;
          }
        }
      }
      .table-main {
        flex: 1;
        padding: 0 16px;
        box-sizing: border-box;
        .files-icon {
          .disabled {
            color: #d4d7d8 !important;
          }
          .anticon {
            cursor: pointer;
            font-size: 18px;
            color: #1677ff;
            margin-right: 16px;
            &:last-of-type {
              margin-right: 0;
            }
          }
          .anticon-download,
          .anticon-cloud-upload {
            color: #239b53;
          }
        }
      }
      .table-pager {
        flex-shrink: 0;
        padding: 10px 16px;
        box-sizing: border-box;
      }
    }
  }
}

.project-select {
  &.ant-select {
    .ant-select-selection {
      &.ant-select-selection--single {
        width: 350px !important;
      }

      &.ant-select-selection--multiple {
        min-width: 350px !important;
      }
    }
  }
}

.table-file-name {
  display: flex;
  align-items: center;
  .icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    &.pdf {
      background: url("~@/assets/img/fileIcon/pdf.png");
      background-size: 100% 100%;
    }
    &.doc {
      background: url("~@/assets/img/fileIcon/doc.png");
      background-size: 100% 100%;
    }
    &.xls {
      background: url("~@/assets/img/fileIcon/xls.png");
      background-size: 100% 100%;
    }
    &.ppt {
      background: url("~@/assets/img/fileIcon/ppt.png");
      background-size: 100% 100%;
    }
    &.image {
      background: url("~@/assets/img/fileIcon/image.png");
      background-size: 100% 100%;
    }
    &.txt {
      background: url("~@/assets/img/fileIcon/txt.png");
      background-size: 100% 100%;
    }
    &.zip {
      background: url("~@/assets/img/fileIcon/zip.png");
      background-size: 100% 100%;
    }
    &.music {
      background: url("~@/assets/img/fileIcon/music.png");
      background-size: 100% 100%;
    }
    &.video {
      background: url("~@/assets/img/fileIcon/video.png");
      background-size: 100% 100%;
    }
    &.annex {
      background: url("~@/assets/img/fileIcon/annex.png");
      background-size: 100% 100%;
    }
    &.cad {
      background: url("~@/assets/img/fileIcon/cad.png");
      background-size: 100% 100%;
    }
  }
  .name {
    flex: 1;
    &:hover {
      cursor: pointer;
      color: #54adff;
      text-decoration: underline;
    }
  }
}
